<template>
  <div class="census">
    <div v-for="(item, index) in DiskCensusData" :key="index" class="fifteen">
      <!-- <div>{{item}}</div> -->
      <div v-if="item.value < '25' && item.value > '0'">
        <img src="../img/hard_blue.png" alt="" />
        <span>-{{ item.value }}%</span>
      </div>
      <div v-else-if="item.value < '50' && item.value > '25'">
        <img src="../img/hard_yellow.png" alt="" />
        <span>-{{ item.value }}%</span>
      </div>
      <div v-else-if="item.value < '75' && item.value > '50'">
        <img src="../img/hard_orange.png" alt="" />
        <span>-{{ item.value }}%</span>
      </div>
      <div v-else>
        <img src="../img/hard_red.png" alt="" />
        <span>-{{ item.value }}%</span>
      </div>
      <!-- <div v-for="(item, index) in DiskCensusData" :key="index">
        <p>-{{ item }}%</p>
      </div> -->
        <p>{{item.name}}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "Census",
  // props: {
  //   // censusvalue: {
  //   //   type: Array,
  //   //   default: () => [],
  //   // },
  //   // ipdata: {
  //   //   type: Array,
  //   //   default: () => [],
  //   // },
  //   //censusvalue:Array
  //   DiskCensusData:Array
  // },
  props:['DiskCensusData']
  // mounted() {
  //   console.log(this.censusvalue);
  // },
};
</script>
<style scoped>
.census {
  display: flex;
}
.fifteen {
  position: relative;
  width: 125px;
  height: 100px;
  /* background: yellow; */
  margin-left: 17px;
  margin-top: 68px;
}
img {
  width: 50px;
  height: 50px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -25px;
  margin-left: -25px;
}
span {
  font-size: 13px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  color: #07daf9;
  position: absolute;
  top: 21px;
  left: 81px;
}
p {
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  color: #a4d6ff;
  position: absolute;
  top: 68px;
  left: 15px;
}
</style>
